$(document).ready(function()
{    
    window.setInterval(reloadData, 300000);
    $( "#datepicker" ).datepicker();
    $('body').on("change","#datepickerDiv",{},updateForm);
//    Plot();
});

function reloadData(){
    $('#loader').show();
    $('#kpis').load(window.location.pathname+window.location.search,"",loadCompleted());
}

function updateForm(){
    $('#loader').show();
    $('#kpis').load(window.location.pathname+window.location.search,"date="+$('#datepicker').val(),loadCompleted());
}

function loadCompleted(){
    $('#loader').hide();
}

function Plot(){
    
        $(".donut").each(function(i){ 
            
         alert(i)
         var pr=+($(this).next().text().replace("%",""))
         alert(pr)
         var backCol='#E6E6FA';
         if (pr<76){
             var foreCol='#FF0000';
         }    
         else if (pr<86){
             var foreCol='#FFFF00';
         } 
         else if (pr<101){
             var foreCol='#01DF01';
         }else if (pr<115){
             var foreCol='#FFFF00';
         }else{
             var foreCol='#FF0000';
         }
         var goal=(pr<101)?100-pr:0;

        var data = [
         { label: "PR", data: pr, color: foreCol},
         { label: "Goal", data: goal, color: backCol }
         ];

         $.plot($(this), data,
         {
             series: {
                 pie: {
                     innerRadius: 0.4,
                     show: true,
                     label: { show: false },
                     gradient: {
                         colors: [
                             { brightness: 6, opacity: 9 },
                             { brightness: 1, opacity: 1 }
                         ]}
                 }
             },
             legend: { show: false }
    });
    }); };
